<template>
	<el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
		<el-form-item prop="username">
			<el-input size="small" @keyup.enter.native="handleRegister" v-model="loginForm.username" auto-complete="off"
				:placeholder="$t('login.username')">
				<i slot="prefix" class="icon-shouji"></i>
			</el-input>
		</el-form-item>

		<el-form-item prop="password">
			<el-input size="small" @keyup.enter.native="handleRegister" :type="passwordType"
				v-model="loginForm.password" auto-complete="off" :placeholder="$t('login.password')">
				<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
				<i slot="prefix" class="icon-mima"></i>
			</el-input>
		</el-form-item>

		<el-form-item prop="password">
			<el-input size="small" @keyup.enter.native="handleRegister" :type="passwordType"
				v-model="loginForm.duplicatePassword" auto-complete="off" :placeholder="$t('login.duplicatePassword')">
				<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
				<i slot="prefix" class="icon-mima"></i>
			</el-input>
		</el-form-item>
		<el-form-item>
			<el-button size="small" type="primary" @click="register" class="login-submit">
				{{$t('login.register')}}
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import request from "@/router/axios";
	import {
		isvalidatemobile
	} from "@/util/validate";
	import {
		mapGetters
	} from "vuex";
	import {
		baseUrl
	} from '@/config/env';
	export default {
		name: "codelogin",
		data() {
			const validatePhone = (rule, value, callback) => {
				if (isvalidatemobile(value)[0]) {
					callback(new Error(isvalidatemobile(value)[1]));
				} else {
					callback();
				}
			};
			const validateCode = (rule, value, callback) => {
				if (value.length != 4) {
					callback(new Error("请输入4位数的验证码"));
				} else {
					callback();
				}
			};
			return {
				passwordType: "password",
				msgText: "",
				msgTime: "",
				msgKey: false,
				loginForm: {
					username: "",
					duplicatePassword: "",
					password: "",
				},
				loginRules: {
					phone: [{
						required: true,
						trigger: "blur",
						validator: validatePhone
					}],
					code: [{
						required: true,
						trigger: "blur",
						validator: validateCode
					}]
				}
			};
		},
		created() {
			this.msgText = this.config.MSGINIT;
			this.msgTime = this.config.MSGTIME;
		},
		mounted() {},
		computed: {
			...mapGetters(["tagWel"]),
			config() {
				return {
					MSGINIT: this.$t("login.msgText"),
					MSGSCUCCESS: this.$t("login.msgSuccess"),
					MSGTIME: 60
				};
			}
		},
		props: [],
		methods: {
			handleRegister() {
				let that = this;
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						request({
								headers: {
									'Content-Type': 'application/json;charset=utf-8'
								},
								method: 'post',
								url: baseUrl + '/api/user/register',
								data: this.loginForm,
							})
							.then(function(response) {
								if (response.data.status == 0) {
									that.$message.error(response.data.info)
								} else if (response.data.status == 1) {
									that.$message.success("注册成功");
								}
							})
							.catch(function(error) {
								that.$message.error( that.$t("message.systemError"))
							});

					}

				});
			},
			register() {
				this.handleRegister();
			},

			showPassword() {
				this.passwordType == "" ?
					(this.passwordType = "password") :
					(this.passwordType = "");
			},
		}
	};
</script>

<style>
	.msg-text {
		display: block;
		width: 60px;
		font-size: 12px;
		text-align: center;
		cursor: pointer;
	}

	.msg-text.display {
		color: #ccc;
	}
</style>
